import axios from 'axios'
import React, { useState } from 'react'
import PubSub from 'pubsub-js';

export default function Header() {
    // 初始值设置为空
    const [search,setSearch]=useState('')
    // 受控表单的事件函数
    const changeSearchHandle=(e)=>{
        setSearch(e.target.value)
    }
    // 点击按钮的事件函数
    const searchHandle=async ()=>{
        // 这里的地址就是我们请求的目标地址,q后面的就是我们输入框要搜索的数据,添加上去
       const result = await axios.get("https://api.github.com/search/users?q=" + search)
        // 这里打印可以看到result搜索出的结果,结果要发送给List展示出来
        // 此处需要传值,因为是兄弟传值,所以可以使用pubsub方法操作
        // 这里发布信息,List订阅信息并展示
       console.log(result);
        // 这里发布信息    
       PubSub.publish('github',result)
    }
  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        {/* 给输入框绑定onChange事件,变为受控表单,初始值为默认的search */}
        <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search" />
        &nbsp;
        {/* 在给按钮绑定一个点击搜索事件 */}
        <button onClick={searchHandle}>Search</button>
      </div>
    </section>
  )
}
